<template>
  <div id="allmap" style="height: 800px; width: 800px"></div>
</template>

<script>
import { defineComponent, onMounted, nextTick, toRefs, reactive } from "vue";
// import BMap from "BMap";
// import BMapLib from "BMap";
import { araeList2 } from "./baiduMap";
import bg from "@/assets/images/4.png";
import bg2 from "@/assets/images/5.png";
import v from "@/assets/logo.png";
export default defineComponent({
  setup() {
    const data = reactive({
      search: "",
      map: null,
      list: ["学校", "医院", "公交"],
      zoom: 0,
      cityShow: false,
    });

    const  addMarkerCluser = (map,point,cluserMakerSum)=> {
      console.log(point)
      var markerdef = new BMap.Marker(point, {
        // icon: 设置marker样式
        icon: new BMap.Symbol(bg, {
          scale: 20,
          strokeWeight: 1,
          strokeColor: "white",
          fillColor: "blue",
          fillOpacity: 0.59
        })
      });
      // //设置marker的label
      var labelTitleCluser = cluserMakerSum ;
      let label = new BMap.Label(labelTitleCluser, {
        offset: new BMap.Size(12, 12)
      });
      //设置label样式
      label.setStyle({
        color: "#fff",
        fontSize: "14px",
        backgroundColor: "0.05",
        border: "0px "
      });
      markerdef.setLabel(label);
      //监听点击事件
      markerdef.addEventListener("click", function() {
        console.log("点击自定义聚合maker");        
      });
      // map.addOverlay(markerdef);
      //
      return markerdef;
    }


    const newMap = () => {
      var map = new BMap.Map("allmap"); // 创建Map实例
      map.centerAndZoom(new BMap.Point(114.073665, 22.657179), 12); // 初始化地图,设置中心点坐标和地图级别
      map.setCurrentCity("深圳"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    
    
      var markers = [];
      var pt = null;
      for (var i in araeList2) {
        pt = new BMap.Point(araeList2[i].lng, araeList2[i].lat);
        var wfgIcon = new BMap.Icon(v, new BMap.Size(32, 32)); //当地图放大到某个点只有一组数据时的marker样式
        var marker = new BMap.Marker(pt); //设置marker位置及样式
        map.addOverlay(marker);
        markers.push(marker);
      }

      var markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: markers,
        minClusterSize: 3,
      });

      var cluster = markerClusterer._clusters;
       var oldmk = [];
      for (var n = 0; n < cluster.length; n++) {
       //cluster[i]._markers中包含此聚合点的所有marker集合
       //marker长度大于2时不进行聚合效果显示
        if (cluster[n]._markers.length < 2) continue;
        //自定义函数内容，可进行聚合点数据获取操作
      
        //拿到聚合点中的marker数量，用于数字显示
        var cluserMakerSum = cluster[n]._markers.length;
        //添加marker
        oldmk.push(addMarkerCluser(map,cluster[n]._center,cluserMakerSum));
      }
      console.log(oldmk)
    };


    onMounted(() => {
      nextTick(() => {
        newMap();
      });
    });

    return {
      ...toRefs(data),
    };
  },
});
</script>

<style>
/*百度地图版权样式class*/
.anchorBL {
  display: none;
}

/* 百度地图版权信息隐藏 */
.BMap_cpyCtrl {
  display: none !important;
}
.anchorBL a img {
  display: none !important;
}
</style>